<template>
  <div class="component-wrapper">
    <as-header title="Swipe" fixed>
      <router-link to="/" slot="left" class="link">
        <span class="iconfont icon-zuosanjiao"></span>
      </router-link>
    </as-header>
    <br>
    <br>
    <div class="swipe-wrapper">
      <h2 class="swipe-title">基础用法</h2>
      <as-swipe class="swipe">
        <as-swipe-item>page1</as-swipe-item>
        <as-swipe-item>page2</as-swipe-item>
        <as-swipe-item>page3</as-swipe-item>
        <as-swipe-item>page4</as-swipe-item>
      </as-swipe>
    </div>
    <div class="swipe-wrapper">
      <h2 class="swipe-title">取消自动播放</h2>
      <as-swipe class="swipe" :auto="0">
        <as-swipe-item>page1</as-swipe-item>
        <as-swipe-item>page2</as-swipe-item>
        <as-swipe-item>page3</as-swipe-item>
        <as-swipe-item>page4</as-swipe-item>
      </as-swipe>
    </div>
    <div class="swipe-wrapper">
      <h2 class="swipe-title">隐藏 indicators</h2>
      <as-swipe class="swipe" :show-indicators="false">
        <as-swipe-item>page1</as-swipe-item>
        <as-swipe-item>page2</as-swipe-item>
        <as-swipe-item>page3</as-swipe-item>
        <as-swipe-item>page4</as-swipe-item>
      </as-swipe>
    </div>
    <div class="swipe-wrapper">
      <h2 class="swipe-title">显示标题</h2>
      <as-swipe class="swipe" :show-title="true" :indicators-position="'right'">
        <as-swipe-item :title="'这是第1页的标题'">page1</as-swipe-item>
        <as-swipe-item :title="'这是第2页的标题'">page2</as-swipe-item>
        <as-swipe-item :title="'这是第3页的标题'">page3</as-swipe-item>
        <as-swipe-item :title="'这是第4页的标题'">page4</as-swipe-item>
      </as-swipe>
    </div>
    <div class="swipe-wrapper">
      <h2 class="swipe-title">使用页数</h2>
      <as-swipe class="swipe" :indicators-type="'number'">
        <as-swipe-item>page1</as-swipe-item>
        <as-swipe-item>page2</as-swipe-item>
        <as-swipe-item>page3</as-swipe-item>
        <as-swipe-item>page4</as-swipe-item>
      </as-swipe>
    </div>
  </div>
</template>

<script>
</script>

<style lang="scss">
.component-wrapper {
  .swipe {
    height: 420px;
    width: 750px;
  }
  .swipe-wrapper {
    margin-bottom: 30px;
  }
  .swipe-title {
    margin-top: 15px;
    text-align: center;
    font-weight: bold;
  }
  .as-swipe-items-wrap > section:nth-child(1) {
    background: deepskyblue;
  }
  .as-swipe-items-wrap > section:nth-child(2) {
    background: cyan;
  }
  .as-swipe-items-wrap > section:nth-child(3) {
    background: chartreuse;
  }
  .as-swipe-items-wrap > section:nth-child(4) {
    background: green;
  }
}
</style>
